import React, { useEffect, useState, useCallback } from 'react';
import { Col, Empty, Row } from 'antd';
import { getCallStrategyDetail } from 'admin/servers/servers';
import { CallStrategyDetail } from 'admin/schema/Task';
import { StrategyItem } from '../../components/StrategyItem';
interface IProps {
  /**
   * 任务Id
   */
  taskId: number;
}
/* 重呼策略 */
const CallStrategy: React.FC<IProps> = (props: IProps) => {
  const [callStrategy, setCallStrategy] = useState<CallStrategyDetail[]>([]);
  const { taskId } = props;
  const loadData = useCallback(() => {
    getCallStrategyDetail(taskId)
      .then(res => {
        setCallStrategy(res.data);
      })
      .catch(error => {
        console.error(`系统异常: ${JSON.stringify(error)}`);
      });
  }, [taskId]);
  useEffect(() => {
    loadData();
  }, [loadData]);

  if (!callStrategy || !callStrategy.length) {
    // 无自定义策略项，不展示
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} imageStyle={{ height: 100 }} />;
  }

  return (
    <Row className="task-callstrategy">
      {callStrategy.map((dom, index) => {
        return (
          <Col span={10} key={'callStrategy_' + index} className="box">
            <h4 className="tit">第{index + 1}轮重呼策略</h4>
            <StrategyItem dom={dom} />
          </Col>
        );
      })}
    </Row>
  );
};

export default CallStrategy;
